<template>
    <view class="container">
        <!-- 医疗检查报告内容 -->
        <view ref="report" id="report" class="report-content">
            <text class="title">医疗检查报告单</text>
            <view class="table-container">
                <text class="subtitle">检查结果</text>
                <view class="table">
                    <view class="table-row">
                        <text class="table-cell">检查项目</text>
                        <text class="table-cell">结果</text>
                        <text class="table-cell">备注</text>
                    </view>
                    <view class="table-row" v-for="(item, index) in results" :key="index">
                        <text class="table-cell">{{ item.name }}</text>
                        <text class="table-cell">{{ item.result }}</text>
                        <text class="table-cell">{{ item.remark }}</text>
                    </view>
                </view>
            </view>
            <view class="signature">
                <text class="subtitle">签字</text>
                <view class="signature-box">____________________</view>
            </view>
        </view>

        <!-- 操作按钮 -->
        <view class="buttons">
            <button @click="text.captureReport" class="download-btn">下载报告图片</button>
            <button @click="text.previewReport" class="preview-btn">预览报告图片</button>
        </view>
        <image :src="posterUrl" style="width: 100%; height: 300px;"></image>
        <!-- 预览弹窗 -->
        <view v-if="isPreviewVisible" class="preview-overlay" @click="closePreview">
            <view class="preview-container" @click.stop>
                <image class="preview-image" :src="imageBase64" mode="widthFix"></image>
                <button @click="closePreview" class="close-btn">关闭</button>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            results: [
                {name: "血压", result: "120/80 mmHg", remark: "正常"},
                {name: "血糖", result: "5.2 mmol/L", remark: "正常"},
                {name: "心电图", result: "正常", remark: "无异常"},
            ],
            imageBase64: '',  // 保存生成的图片base64
            isPreviewVisible: false, // 控制预览弹窗的显示和隐藏
            posterUrl:''
        };
    },
    methods: {
        // 获取生成的base64 图片路径
        captureReport(val) {
            // let posterUrl = val.replace(/[]/g, ''); // 去除base64位中的空格
            console.log(val)
            this.posterUrl = val
        },
        downloadImage(imageBase64) {
            if (!imageBase64) {
                console.error("没有生成图片，无法下载");
                return;
            }

            // 使用uni.downloadFile进行下载，适应uniapp环境
            const link = document.createElement('a');
            link.href = imageBase64;
            link.download = '医疗检查报告.png';
            link.click();
        },
        previewReport() {
            if (this.imageBase64) {
                this.isPreviewVisible = true;
            } else {
                this.captureReport();
            }
        },
        closePreview() {
            this.isPreviewVisible = false;
        }
    }
}
</script>
<script  module="test" lang="renderjs">
import html2canvas from 'html2canvas';
   export default {
        methods:{
                captureReport() {
            setTimeout(() => {
                //const reportElement = this.$refs.report;
                const reportElement = document.getElementById('report');
                // let reportElement = null;
                // const query = uni.createSelectorQuery().in(this);
                // query.select('#report').boundingClientRect(data => {
                //     console.log('选中节点的位置信息:', data);
                //     reportElement = data
                // }).exec();
                console.log('报表元素:', JSON.stringify(reportElement));

                if (!reportElement) {
                    console.error("报告内容元素未找到！");
                    return;
                }
                html2canvas(reportElement).then(canvas => {
                    console.log('Canvas Generated:', canvas);
                    this.imageBase64 = canvas.toDataURL('image/png');
                    console.log('Base64 Image:', this.imageBase64);
                    // 生成图片后触发下载
                    this.downloadImage(this.imageBase64);
                }).catch(error => {
                    console.error("生成图片失败:", error);
                });
            }, 2000);
        },
        }
   }
</script>

<style scoped>
.container {
    padding: 20rpx;
}

.report-content {
    border: 1px solid #ccc;
    padding: 20rpx;
    margin-bottom: 20rpx;
}

.title {
    font-size: 30rpx;
    font-weight: bold;
    text-align: center;
}

.subtitle {
    font-size: 24rpx;
    margin-top: 20rpx;
}

.table-container {
    margin-top: 20rpx;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table-row {
    display: flex;
    justify-content: space-between;
    padding: 10rpx;
    border: 1px solid #ccc;
}

.table-cell {
    width: 33%;
    text-align: center;
}

.signature {
    margin-top: 30rpx;
    text-align: center;
}

.signature-box {
    border-bottom: 2px solid #000;
    width: 200rpx;
    margin: 0 auto;
    margin-top: 20rpx;
}

.buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
}

.download-btn, .preview-btn {
    background-color: #4CAF50;
    color: white;
    padding: 10rpx 20rpx;
    font-size: 18rpx;
    border-radius: 5rpx;
    width: 48%;
}

.download-btn:hover, .preview-btn:hover {
    background-color: #45a049;
}

.preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.preview-container {
    position: relative;
    background-color: white;
    padding: 20rpx;
    border-radius: 10rpx;
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.preview-image {
    max-width: 100%;
    max-height: 80vh;
}

.close-btn {
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 8rpx;
    border-radius: 50%;
    font-size: 20rpx;
    cursor: pointer;
}

.close-btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
}
</style>

